<template>
  <div>
    <ul class="myUl">
      <li v-for="(x,index) in dataList">
        <el-row class="mymarginTop_10px">
          <el-col :span="24">逾期时长：</el-col>
          <el-col :span="9">
            <template>
              <el-input-number :min="1" v-model="x.time" @change="handleChange"></el-input-number>
            </template>
          </el-col>
          <el-col :span="6">
            <template>
              <el-select v-model="x.unit" placeholder="单位">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-col>
        </el-row>
        <el-row class="mymarginTop_10px">
          推送内容：
          <el-input type="textarea" v-model="x.content" placeholder="推送内容"></el-input>
        </el-row>
        <el-row class="mymarginTop_10px"> 
          推送对象：
          <template>
            <LinkagePeople 
              :datamsg="x.range"
              @getChildData="getComplaint_chargeuser($event,index)"></LinkagePeople>
          </template>
        </el-row>
        <el-button type="primary" icon="el-icon-close" class="myclose" @click="onClose(index)" title="移除"></el-button>
      </li>
      <el-button type="primary" icon="el-icon-plus" class="myadd" @click="onAdd" title="添加">添加一项</el-button>
    </ul>
  </div>
</template>

<style scoped>
  .myUl > li{
    box-sizing: border-box;
    border:1px solid transparent;
    position: relative;
  }
  .myUl > li::after{
    content: " ";
    display: block;
    height: 1px;
    background: #DCDFE6;
    margin-top:10px; 
  }
  .myUl > li:hover{
    border:1px dashed #F56C6C;
  }
  .myUl > li:hover .myclose{
    display: block;
  }
  .mymarginTop_10px{
    margin-top: 10px;
  }
  .myclose{
    position: absolute;
    top: 0;
    right: 0;
    width:40px;
    height: 40px;
    display: none;
    background: #F56C6C;
    padding:0;
    border:none;
    color: #fff;
  }
  .myadd{
    width:100%;
  }
</style>
<style>
  .myclose i,.myadd i{
    color: #fff;
  }
</style>
<script>
  import LinkagePeople from 'components/LinkagePeople.vue';
  export default{
    data(){
      return {
        options:[{label:"天",value:"天"},{label:"小时",value:"小时"},{label:"分钟",value:"分钟"}],
        complaint_chargeuser:null,
        value:"",
        dataList:[]
      }   
    },
    props: ['overduePushInitialData'],
    components: {
      LinkagePeople
    },
    watch: {
      dataList(val){
        this.$emit("getChildData",this.dataList);//发射数据
      }
    },
    created(){
      let vm=this;
      vm.dataList=vm.overduePushInitialData;
    },
    methods:{
      getComplaint_chargeuser(val,index){
        this.dataList[index].range=val;
      },
      onClose(index){
        this.dataList.splice(index,1);
      },
      handleChange(val){

      },
      onAdd(){
        this.dataList.push(
          {
            // "content":"",
            // "range":{
            //   "scope":{},
            //   "subscope":{}
            // },
            // "time":0,
            // "unit":""
          }
        );
      }
    }
  }

</script>



